ul li{
	margin: 0;
	padding: 0;
}
.box-3d {
	
	width: 150px;
	height: 200px;
	margin: 100px auto;
	
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	border: 1px solid chartreuse;
	/*animation: aa 5s;
	-webkit-animation: aa 5s;*/
}

@keyframes aa{
	from{
		transform: rotateX(0) rotateY(0);
		-webkit-transform: rotateX(0) rotateY(0);
	}
	to{
		transform: rotateX(360deg) rotateY(360deg);
		-webkit-transform: rotateX(360deg) rotateY(360deg);
	}
}
.box-3d:hover{
	
	animation: aa 5s infinite;
	-webkit-animation:aa 5s infinite ;
}
.box-3d li{
	list-style: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 200px;
	
}


.box-3d li:nth-of-type(1){
	background: url(../img/pic01.png);
	transform: rotateY(90deg) translateZ(100px);
	-webkit-transform: rotateY(90deg) translateZ(100px);
	
	
}
.box-3d li:nth-of-type(2){
	background: url(../img/pic02.png);
	transform: rotateY(90deg) translateZ(-100px);
	-webkit-transform: rotateY(90deg) translateZ(-100px);
	
}
.box-3d li:nth-of-type(3){
	background: url(../img/pic03.png);
	transform: rotateX(90deg) translateZ(100px);
	-webkit-transform: rotateX(90deg) translateZ(100px);
	
}
.box-3d li:nth-of-type(4){
	background: url(../img/pic04.png);
	transform: rotateX(90deg) translateZ(-100px);
	-webkit-transform: rotateX(90deg) translateZ(-100px);
	
}
.box-3d li:nth-of-type(5){
	background: url(../img/pic05.png);
	transform: translateZ(100px);
	-webkit-transform:  translateZ(100px);
	
}
.box-3d li:nth-of-type(6){
	background: url(../img/pic06.png);
	transform:  translateZ(-100px);
	-webkit-transform:  translateZ(-100px);
	
}



